<template>
  <div class="tabbar-page">
    <div class="tabbar-page-content">
      <!-- vue3.0配置 -->
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component
            :is="Component"
            :key="$route.name"
            v-if="$route.meta.keepAlive"
          />
        </keep-alive>
        <component
          :is="Component"
          :key="$route.name"
          v-if="!$route.meta.keepAlive"
        />
      </router-view>
    </div>

    <van-tabbar
      fixed
      class="tabbar"
      v-model="activeTabIndex"
      inactive-color="#454757"
      active-color="#EE762A"
      z-index="99"
    >
      <!-- :to="item.path" -->
      <van-tabbar-item
        placeholder
        route
        v-for="(item,index) in tabList"
        @click="Jump(item.path)"
        :key="index"
      >
        <template #icon>
          <svg
            class="icon"
            aria-hidden="true"
          >
            <use :href="activeTabIndex == index ? item.activeIcon : item.icon" />
          </svg>
        </template>
        <!-- <i slot="icon" :class="item.icon"></i> -->
        <p class="title">
          {{ item.name }}
        </p>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { Dialog } from 'vant'
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
// import { useStore } from 'vuex'
import { getToken, setToken } from '@/service/cookie'
// const store = useStore()
const router = useRouter()
const tabList: any = ref([
  {
    icon: '#icon-shouye',
    activeIcon: '#icon-shouye2',
    name: '首页',
    path: '/home'
  },
  {
    icon: '#icon-xuqiu',
    activeIcon: '#icon-xuqiu2',
    name: '需求',
    path: '/demand'
  },
  {
    icon: '#icon-guangchang',
    activeIcon: '#icon-guangchang2',
    name: '广场',
    path: '/square'
  },
  {
    icon: '#icon-faxian',
    activeIcon: '#icon-faxian2',
    name: '发现',
    path: '/find'
  },
  {
    icon: '#icon-wode',
    activeIcon: '#icon-wode2',
    name: '我的',
    path: '/userCenter'
  }
])

const activeTabIndex = computed(() => {
  const routeName = router.currentRoute.value.path
  switch (routeName) {
    case '/home':
      return 0
    case '/demand':
      return 1
    case '/square':
      return 2
    case '/find':
      return 3
    case '/userCenter':
      return 4
    default:
      return 0
  }
})

const Jump = async (path: any) => {
  // await store.dispatch('fetchUserInfo')
  if (path === '/userCenter') {
    if (getToken('token') && (getToken('bindId') === 'undefined' || getToken('bindId') === undefined || !getToken('bindId'))) {
      router.replace(path)
    } else {
      Dialog.confirm({
        title: '温馨提示',
        message: '请先登录/注册'
      })
        .then(async () => {
          // on confirm
          setToken('token', '')
          setToken('bindId', '')
          router.push('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  } else {
    router.replace(path)
  }
}

</script>

<style lang="less" scoped>
.icon {
  width: 22px;
  height: 22px;
}
.title {
  font-size: 12px;
  font-weight: 400;
  // color: #454757;
  // margin-top: 3px;
}
.tabbar-page {
  padding-bottom: 94px;
  // background-color: #f7f7f7;
}

.tabbar-page-content {
  position: relative;
}

.tabbar {
  p {
    text-align: center;
  }
}

@media (min-width: 750px) {
  .icon {
  width: 22px;
  height: 22px;
}
.title {
  font-size: 12px;
  font-weight: 400;
  // color: #454757;
  // margin-top: 3px;
}
.tabbar-page {
  padding-bottom: 94px;
  // background-color: #f7f7f7;
}

.tabbar-page-content {
  position: relative;
}

.tabbar {
  p {
    text-align: center;
  }
}
  .tj-icon {
    font-size: 22px;
  }
  .iconfont {
    font-size: 20px;
  }
  .tabbar {
    width: 375px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
    p {
      text-align: center;
    }
  }
}

</style>
